<template>
    <el-form
        ref="refForm"
        v-column="3"
        label-width="100px"
        label-position="left"
    >
        <slot></slot>
        
        <el-form-item label-width="0px" :class="{block: itemLen, right: itemLen}">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
</template>

<script lang="ts" setup>
/**
 * 数据的筛选表单
 * 默认分3栏布局，可通过v-column配置
 * @prop 支持el-form的所有属性
 * @event search 搜索事件
 * @event reset 重置事件
 * @slot 默认插槽，可写入el-form-item
 */
import { computed, useSlots } from 'vue'

 const slots:any = useSlots()

 const itemLen = computed(() => {
    const len = slots?.default()?.length
    return len % 3 === 0
})

 const emit = defineEmits(['search', 'reset'])
 const onSearch = () => {
    emit('search')
 }

 const onReset = () => {
    emit('reset')
 }

</script>
